<template>
  <!--我的订单-->
  <div class="content">
    <headers></headers>
    <div class="padding250">
      <div class="auto ">
        <div class="titleWrap">
          <p class="titleName">继续教育</p>
        </div>
        <div class="tab">
          <a href="javascript:;" class="on">继续教育学时记录</a><a href="javascript:;">学时满证书自动续期</a>
        </div>
        <div class="showwrap">
          <router-link to="/ziliao/ablity/ablity_leida" tag="div" class="circleOut">
            <i-circle :percent="80" :size="184" :trail-width="4" :stroke-width="5" trail-color="#eeeff3" stroke-color="#083C68"
              dashboard>
              <span class="demo-circle-inner" style="font-size:40px">60</span>
              <p class="mypoint">我的学时</p>
            </i-circle>
            <span class="abilityTip font14">总学时 100</span>
          </router-link>
        </div>
        <p class="btn">
          <router-link to="/shenbaoactive">活动申报</router-link>
          <a href="javascript:;">去看视频</a>
        </p>
        <div class="tableout">
          <Table :columns="columns1" :data="data1"></Table>
        </div>
        <div class="pageout">
          <Page :total="100" />
        </div>
      </div>
    </div>


    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .auto{
    background: #fff;
    margin-top: 30px;
    padding: 40px;
  }
  .titleWrap {
    height: 40px;
    font-size: 18px;
    padding-bottom: 20px;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    margin-bottom: 20px;
    color: #083C68;
    .titleName {
      float: left;
      line-height: 24px;

      padding-bottom: 13px;
    }
  }
  .pageout {
    text-align: center;
    margin-top: 25px;
    height: 34px;
  }
  .tab{
    text-align: center;
    padding: 30px 0;
    a{
      font-size: 18px;
      color: #999;
      &:first-child{
        margin-right: 180px;
      }
      &.on{
        color: #264570;
      }
    }
  }
  .btn{
    text-align: center;
    margin: 50px 0;
    a{
      color: #264570;
      display: inline-block;
      width: 168px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border:1px solid #264570;
      border-radius: 50px;
      font-size: 18px;
      &:first-child{
        margin-right: 50px;
      }
    }
  }
  .showwrap {
    text-align: center;
    .circleOut {
      cursor: pointer;
      display: inline-block;
      width: 260px;
      height: 260px;
      padding-top: 38px;
      background: url("../../assets/cricleBack.png") no-repeat center center;
      background-size: 260px;
    }


  }
  .mypoint {
    font-size: 14px;
    margin-top: 12px;
    color: #083C68;
    text-align: center;
  }
  .abilityTip {
    display: inline-block;
    height: 42px;
    padding: 0 15px;
    border-radius: 21px;
    text-align: center;
    line-height: 42px;
    background-color: #083C68;
    color: #fff;
    min-width: 130px;
    /*font-size: 16px;*/
  }




</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  export default {
    name: 'orderdetail',
    props: {},
    data() {
      return {
        center: "center",
        columns1: [{
            title: '名称',
            key: 'point',
            align: "center"
          },
          {
            title: '时间',
            key: 'num',
            align: "center"
          },
          {
            title: '学分',
            key: 'timer',
            align: "center"
          }
        ],
        data1: [{
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },
          {
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },
          {
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },
          {
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },
          {
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },
          {
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },
          {
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },
          {
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },
          {
            point: '活动申报失败',
            num: '2020-02-01',
            timer: '+0'
          },


        ]
      };
    },
    methods: {

    },
    created() {

    },
    components: {
      headers,
      footers
    }
  }
</script>
